<template>
  <div class="search-bar">
      <mu-flexbox :gutter="0">
        <mu-flexbox-item grow="5">
          <input class="search-input" placeholder="搜索科室或医生" v-model="inputValue" @keypress="handleSearch" />
        </mu-flexbox-item>
        <mu-flexbox-item grow="1">
          <i class="iconfont icon-ssousuo" @click="handleSearch"></i>
        </mu-flexbox-item>
      </mu-flexbox>
  </div>
</template>

<script>
export default {
  name: 'search-bar',
  data () {
    return {
      inputValue: '',
      timer: null
    }
  },
  methods: {
    handleSearch () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.$emit('search', this.inputValue)
      }, 400)
    }
  }
}
</script>

<style lang="less" scoped>
.search-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin:.5em 1em;
  background: #Fff;
  .search-input {
    border: 1px solid #fff;
    padding: .6em 1em;
    display: block;
    width: 100%;
  }
  .icon-ssousuo {
    color:#ccc;
    position: absolute;
    right: 1em;
    top: .3em;
    background: #fff;
    cursor: pointer;
    display: block;
  }
}
</style>
